<div>
    <div id="app" v-cloak>
        <div class="top border ">
            <div class="f-14 col-main f-b">车辆紧急调度</div>
            <div class="dis-flex flex-x-end flex-y-center">
                <el-button :disabled="isEdit" type="warning" icon="el-icon-circle-plus-outline" @click="addRow" size="mini" >新增</el-button>
                <el-button :disabled="isEdit" type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button :disabled="!isEdit" type="success" @click="saveRow" icon="el-icon-circle-check" size="mini">保存</el-button>
            </div>
        </div>
        <div class="main">
            <!-- 调度车 --------------------------------------------------------------- -->
            <div @click="getref('car')">
                <mytable1 :table="car" ref="car" :height="500" :isedit="isEdit"></mytable>
            </div>
            <!-- 底部tab --------------------------------------------------------------- -->
            <div class="box border m_top10">
               
            </div>
            <!-- 底部tab --------------------------------------------------------------- -->
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
    //全局预定义数据--------------------------->
    isEdit:false, //固定项
    nowRef:'', //固定项
    //调度车表
    car:{
        searchPath:'order/cayuing/search',  //主表获取数据接口地址
        insertPath:'order/cayuing/add',     //主表保存数据接口地址
        //顶部筛选配置
        searchBox: [
            //类型 -> 输入框 
            {
                type: 'text',       //类型 -> 输入框
                title: '叫车人员',  //输入框标题
                dec: '输入叫车人员',  //输入框提示
                field: 'cEMP_NO',   //对应筛选字段 (主表字段)
                icon: 'el-icon-user-solid', //小图标
                value: '',  //固定项
            },{
                type: 'date',   //类型 -> 日期 (2023-01-02)
                title: '年月',    //输入框标题
                dec: '输入年月',    //输入框提示
                field: 'cCAYING_DATE',  //对应筛选字段 (主表字段)
                icon: 'el-icon-user-solid', //小图标
                value: '',  //固定项
                format: 'yyyy-MM/dd',   //日期展示规则 (yyyy-MM/dd)
            },{
                type: 'checkbox',       //类型 -> 多选
                title: '结算类别',      //输入框标题
                field: 'cCAY_STATUS',   //对应筛选字段 (主表字段)
                icon: 'el-icon-message-solid',  //小图标
                value: [],  //固定项
                //内容项
                option: [{
                    value: 0,       //选中后的值
                    label: '未结算' //展示的选项名称
                }, {
                    value: 1,
                    label: '已结算'
                }, {
                    value: 3,
                    label: '结算完'
                }],
            },{
                type: 'daterange', //类型 -> 时间范围
                title: '调车时间',
                field: 'cCAY_STATUS',
                icon: 'el-icon-date',
                value: '',  //固定项
            },{
                //基础设置
                type: 'select_api', //类型 -> 输入框 + 弹出表格 
                title: '客户',        //输入框标题
                dec: '输入客户名称', //输入框提示
                icon: 'el-icon-user-solid', //小图标
                //
                option:[], //固定项
                value: '', //固定项
                //
                //弹出内表格设置
                action: 'cust/search', //请求对象接口地址 -> 对应要调用的基础表接口文档中的地址(/db03/后的部分)
                //弹出内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',            //表头名称
                        field: 'cCUST_NO',      //显示字段 (调用对象基础表的字段)
                        width: 150,             //列宽
                        toInsert:'cCUST_NO',    //带出写入字段 (选中后,要将此字段的值作为筛选参数)
                    },{
                        title: '客户名称',
                        field: 'cCUST_NM',
                        width: 150,
                    },
                ], 
                showfield:'cCUST_NM',   //在内表格中显示的字段 (主表字段)
                filtefield:'cCUST_NM',  //筛选字段 当输入框的值改变时,用来跟显示字段比对筛选的字段(调用对象基础表字段)
                //是否将部分字段作为全局筛选条件,如果是,则增加下方格式代码(此全局筛选条件,将在表格中被使用)
                insert_deafault_field:{
                    'cCUST_NO':'cCUST_NM', //主表字段':'调用对象基础表字段
                },
                //
            },
            //下面的 "承运别" 跟 "承运商" 是联动关系, "承运别"的值改变后, "承运商"的可选内容也会变化
            {
                type: 'select_api', //类型 -> 输入框 + 弹出表格 
                title: '承运别',
                icon: 'el-icon-menu',
                //
                option: [], //固定项
                value: '',  //固定项
                //弹出内表格设置
                action: 'supplier/kind/search', //请求对象接口地址 -> 对应要调用的基础表接口文档中的地址(/db03/后的部分)
                //弹出内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',             //表头名称
                        field: 'cSUPLKIND_NO',   //显示字段 (调用对象基础表的字段)
                        width: 150,              //列宽
                        toInsert:'cSUPLKIND_NO', //带出写入字段 (选中后,要将此字段的值作为筛选参数)
                    },{
                        title: '承运商分类',
                        field: 'cSUPLKIND_NM',
                        width: 150,
                    },
                ], 
                showfield:'cSUPLKIND_NM', 
                filtefield:'cSUPLKIND_NM', 
                //因为与下面的"承运商关联" 所以当前值变化后,要将关联的其他列的字段清空
                clearfield:['cSUPPLIER_NO','cSUPPLIER_NM'], //为空时,需要 关联清空的字段 (主表字段)
                //
            },{
                type: 'select_api',
                title: '承运商',
                field: 'cSUPPLIER_NM',
                icon: 'el-icon-user-solid',
                //
                option: [], //固定项
                value: '', //固定项
                //
                action: 'supplier/search', //请求对象接口地址 -> 对应要调用的基础表接口文档中的地址(/db03/后的部分)
                //弹出内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',
                        field: 'cSUPPLIER_NO',
                        width: 150,
                        toInsert:'cSUPPLIER_NO', //带出写入字段 (选中后,要将此字段的值作为筛选参数)
                    },{
                        title: '承运商',
                        field: 'cSUPPLIER_NM',
                        width: 150,
                    }
                ], 
                showfield:'cSUPPLIER_NM', //展示字段
                filtefield:'cSUPPLIER_NM', //筛选字段(用于选择的数据的某个字段)
                //关联上级字段 (不会预加载,仅当点击此选项的输入框时,自动加载)
                parentField: [
                    ['cSUPLKIND_NO','cSUPLKIND_NO'], //['主表表字段','调用对象基础表字段']   
                ], 
            }
        ],
        //主表配置
        tableRole: [
            {
                title: 'ID',    //表头
                field: 'idx',   //表格展示字段 (主表字段)
                //
                fixed: true,    //是否浮动
                width: 80,      //列宽
                //
                noedit: true,   //是否禁止编辑 值为true 则 禁止编辑, false 或 删除此项 则可编辑
                defautvalue:0,  //默认值,当为输入内容时的默认的值
            }, {
                type: 'select', //类型 -> 固定值选择
                title: '状态',
                field: 'orderstate', //表格展示字段 (主表字段)
                //
                fixed: false,   //是否浮动
                width: 110,     //列宽
                //筛选值
                option: [{
                    value: '0',
                    label: '未调度'
                }, {
                    value: '1',
                    label: '已调度'
                }, {
                    value: '2',
                    label: '已完成'
                }],
                value: '',      //固定项
                noedit:true,    //是否禁止编辑 值为true 则 禁止编辑, false 或 删除此项 则可编辑
            },{
                type: 'date',  //类型 -> 日期
                title: '叫车日期',
                field: 'cCAYING_DATE',
                //
                fixed: false,
                width: 150,
                sort: false,
                //
                value: '',
                defautvalue:getNowTime(true,true,true), //日期类(调用外部方法,生成默认值,不知道如何设置,可依此填写)
                format:"yyyy-MM-dd", //日期格式设置
            },{
                type: 'select_api', //类型 -> 输入框 + 弹出表格 
                title: '客户',
                field: 'cCUST_NO',
                //
                fixed: false,
                width: 200,
                sort: false,
                //
                
                option: [],
                value: '',
                //弹出内表格设置
                action: 'cust/search', //请求对象接口地址 -> 对应要调用的基础表接口文档中的地址(/db03/后的部分)
                //弹出内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',        //表头名称
                        field: 'cCUST_NO',  //显示字段 (调用对象基础表的字段)
                        width: 150,         //列宽
                        toInsert:'cCUST_NO', //带出写入字段 (选中后,要将此字段的值赋值给当前列)
                        stype:'value'       //作为未编辑状态时的显示内容的 对比值
                    },{
                        title: '客户名称',
                        field: 'cCUST_NM',
                        width: 150,
                        toInsert:'cCUST_NM', //带出写入
                        stype:'label' //作为未编辑状态时的显示内容的展示值
                    },
                ], 
                showfield:'cCUST_NM', //展示字段
                filtefield:'cCUST_NM', //筛选字段(用于选择的数据的某个字段)
                hasCheck:true, //是否检查所输入内容为在内表格选择列表中的项
                //调用全局参数作为筛选项
                default_prama:[
                    ['cCUST_NO','cCUST_NO'],  //['主表字段','调用对象基础表的字段']
                ], 
                //
            },{
                type: 'number', //类型 -> 数字
                title: '货物量', 
                field: 'nMAT_QTY',
                //
                fixed: false,
                width: 100,
                //
                value: '0.000', //日期型 默认值为 0.000
            },{
                type: 'area', //类型 -> 数字 
                title: '起始地', 
                field: 'cLADING_ADDR',
                //
                fixed: false,
                width: 300,
                //
                option: [],     //固定项
                areaoption:[],  //固定项
                value: '',      //固定项
                //选择内表格布局规则
                action: 'area', //固定项
                optionTableRole: [
                    {
                        title: '属地代码',
                        field: 'cAPANA_NO',
                        width: 70,
                        toInsert:'cSTAPANA_NO', //带出写入
                    },{
                        title: '属地简称',
                        field: 'cAPANA_SNM',
                        width: 200,
                        toInsert:'cSTAPANA_NM', //带出写入
                    },{
                        title: '属地名称',
                        field: 'cAPANA_NM',
                        width: 200,
                        toInsert:'cLADING_ADDR', //带出写入
                    },{
                        title: '省份',
                        field: 'cPROV_NO',
                        width: 50,
                        toInsert:'cSTPROV_NO', //带出写入
                    },{
                        title: '省份名称',
                        field: 'cPROV_NM',
                        width: 100,
                        toInsert:'cSTPROV_NM', //带出写入
                    },{
                        title: '城市',
                        field: 'cCITY_NO',
                        width: 70,
                        toInsert:'cSTCITY_NO', //带出写入
                    },{
                        title: '城市名称',
                        field: 'cCITY_NM',
                        width: 110,
                        toInsert:'cSTCITY_NM', //带出写入
                    },
                ], 
                showfield:'cLADING_ADDR', //展示字段
                //
            },{
                title: '运费总额', //件数
                field: 'nMAIN_AMT',
                noedit:true,
                //
                fixed: false,
                width: 70,
                //
                type: 'number',
                value: '',
                defautvalue: 0,
            },{
                title: '司机',
                field: 'cVEHMAN_NM',
                //
                fixed: false,
                width: 200,
                //
                type: 'select_api',
                option: [],
                value: '',
                //选择内表格布局规则
                action: 'supplier/cay/track/search', //调用方法
                maxNum:200,
                optionBoxWidth:600,
                optionTableRole: [
                    {
                        title: '编号',
                        field: 'cCORP_NO',
                        width: 150,
                        stype:'value'
                    },{
                        title: '司机',
                        field: 'cVEHMAN_NM',
                        width: 80,
                        toInsert:'cVEHMAN_NM', //带出写入
                        stype:'label'
                    },{
                        title: '司机手机',
                        field: 'cMOBIL_TEL',
                        width: 100,
                        toInsert:'cMOBIL_TEL', //带出写入
                    },{
                        title: '车牌号码',
                        field: 'cVEHPLATE_NO',
                        width: 70,
                        toInsert:'cVEHPLATE_NO', //带出写入
                    }
                ], 
                showfield:'cVEHMAN_NM', //展示字段
                filtefield:'cVEHMAN_NM', //筛选字段(用于选择的数据的某个字段)
            },{
                title: '车牌号码', 
                field: 'cVEHPLATE_NO',
                //
                fixed: false,
                width: 120,
                //
                type: 'text',
                value: '',
                defautvalue: '',
            },{
                type: 'text',
                title: '司机手机', 
                field: 'cMOBIL_TEL',
                //
                fixed: false,
                width: 130,
                //
                value: '',
                defautvalue: '',
            },{
                type: 'select_api',
                title: '启运省份',
                field: 'cSTPROV_NO',
                //
                fixed: false,
                width: 200,
                //
                option: [],
                value: '',
                //选择内表格布局规则
                action: 'info/prov/search', 
                optionTableRole: [
                    {
                        title: '编号',
                        field: 'cPROV_NO',
                        width: 150,
                        toInsert:'cSTPROV_NO', //带出写入
                    },{
                        title: '省份',
                        field: 'cPROV_NM',
                        width: 150,
                        toInsert:'cSTPROV_NM', //带出写入
                    },
                ], 
                showfield:'cSTPROV_NM', //展示字段
                filtefield:'cSTPROV_NM', //筛选字段(用于选择的数据的某个字段)
                clearfield:['cSTCITY_NO','cSTCITY_NM','cSTAPANA_NO','cSTAPANA_NM'], //为空时,需要 关联清空的字段 
                
            },{
                title: '起运城市',
                field: 'cSTCITY_NM',
                //
                fixed: false,
                width: 230,
                sort: false,
                //
                type: 'select_api',
                option: [],
                value: '',
                //选择内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',
                        field: 'cCITY_NO',
                        width: 150,
                        toInsert:'cSTCITY_NO', //带出写入
                    },{
                        title: '城市名称',
                        field: 'cCITY_NM',
                        width: 150,
                        toInsert:'cSTCITY_NM', //带出写入
                    }
                ], 
                showfield:'cSTCITY_NM', //展示字段
                filtefield:'cSTCITY_NM', //筛选字段(用于选择的数据的某个字段)
                //``
                action: 'info/city/search', //调用方法
                parentField:[
                    ['cSTPROV_NO','cPROV_NO'], //['数据字段','基础表字段']   关联上级字段 (不会预加载)
                ],
                clearfield:['cSTAPANA_NO','cSTAPANA_NM'], //为空时,需要 关联清空的字段 

            },{
                title: '起运县区',
                field: 'cSTCITY_NM',
                //
                fixed: false,
                width: 230,
                sort: false,
                //
                type: 'select_api',
                option: [],
                value: '',
                //选择内表格布局规则
                optionTableRole: [
                    {
                        title: '编号',
                        field: 'cAPANA_NO',
                        width: 150,
                        toInsert:'cSTAPANA_NO', //带出写入
                    },{
                        title: '县区',
                        field: 'cAPANA_NM',
                        width: 150,
                        toInsert:'cSTAPANA_NM', //带出写入
                    }
                ], 
                optionTableWidth:400, //内表格宽度
                showfield:'cSTAPANA_NM', //展示字段
                filtefield:'cSTAPANA_NM', //筛选字段(用于选择的数据的某个字段)
                //``
                action: 'info/apana/search', //调用方法
                parentField:[
                    ['cSTCITY_NO','cCITY_NO'], //['数据字段','基础表字段']
                ] //关联上级字段 (不会预加载)

            },
        ],

    },
}
        },
        methods: {

            getref(ref){
                this.nowRef = ref ;
            },

            //增删改查----------------------------------------------------------------------->
            addRow(){
                this.$refs.car.addRow();  
                this.isEdit = true ;
            },
            saveRow(){
                this.$refs.car.saveRow();  
                this.isEdit = true ;
            },
        },
    })
    
</script>